<template>
  <!-- 诚信注册家服员 -->
  <div class="servers-list" @click="$router.push(`/yuesaopage/${servers.id}`)">
    <div class="header">
      <van-image width="80" height="80" :src="servers.img"></van-image>
      <div class="mingpian">
        <div class="names">{{ servers.name }}</div>
        <div class="tag">
          <van-tag
            round
            type="primary"
            :key="index"
            plain
            v-for="(tag, index) in servers.tags"
            >{{ tag }}</van-tag
          >
        </div>
        <div class="jingli">
          <span v-if="servers.address"> {{ servers.address }} |</span>
          <span v-if="servers.age"> {{ servers.age }} |</span>
          <span v-if="servers.experience"> {{ servers.experience }} |</span>
          <span v-if="servers.comment"> {{ servers.comment }}</span>
        </div>
        <div class="qian">8000/26天</div>
      </div>
    </div>
    <div class="pingjia_yuesao" v-show="showPingJia">
      <van-rate
        v-model="servers.star"
        :size="15"
        color="#ffd21e"
        void-icon="star"
        void-color="#eee"
      />
      <span> 评价:{{ servers.pingjia }}</span>
    </div>
  </div>
</template>
<script>
export default {
  name: 'ServersList',
  components: {},
  props: {
    servers: {
      type: Object
    },
    showPingJia: {
      type: Boolean
    }
  },
  data () {
    return {}
  }
}
</script>
<style lang="less" scoped>
.servers-list {
  background-color: #fff;
  border-bottom: 1px solid #f5f7f9;
  .server-item-head {
    .van-image {
      padding: 20px;
      box-sizing: border-box;
    }
    .van-row {
      .van-cell {
        padding: 0;
        border: none;
      }
    }
  }
  .van-cell__title {
    font-weight: 600;
    font-size: 30px;
  }
  .header {
    display: flex;
    .van-image {
      margin-left: 10px;
      margin-top: 20px;
    }
    .mingpian {
      position: relative;
      flex: 1;
      margin-left: 15px;
      padding: 20px;
      padding-left: 6px;
      display: flex;
      flex-direction: column;
      font-size: 30px;
      color: #101010;
      box-sizing: border-box;
      .names {
        font-size: 28px;
        color: #000;
        font-weight: 600;
      }
      .jingli {
        font-size: 12px;
        color: #979191;
        margin-top: 10px;
      }
      .tag {
        flex: 1;
        .van-tag {
          padding: 10px 30px;
          margin-right: 10px;
          margin-top: 30px;
        }
      }
      .qian {
        position: absolute;
        top: 25px;
        right: 22px;
        font-size: 26px;
        color: #979191;
        font-weight: 600;
      }
    }
  }
  .pingjia_yuesao {
    span {
      font-size: 22px;
      color: #999;
      padding-left: 30px;
      vertical-align: middle;
    }
  }
}
</style>
